Picker 选择器

提供多个选项集合供用户选择，支持单列选择、多列选择和级联选择，通常与弹出层组件配合使用。属于交互型「弹层组件」，包括触发元素和弹出内容。

配置组件时有如下特性：

• 采用组件形式调用
• 组件代码作为子元素插入到触发元素中

组件配置

Picker 选择器包含多种类型，通过交互配置可直接实现基础用法、多列选择、级联选择等。

操作流程

1. 选中触发元素，在右侧交互设置面板，选择 Picker 选择器；
2. 设置交互配置项；

组件代码

<template>
<span class="button" @click="onShow">
  首页
  <van-popup v-model="pickerVisible" position="bottom"> // 弹出层
    <van-picker
      :columns="columns"
      @confirm="onConfirm"
      @cancel="onCancel"
      :show-toolbar="true"
      title="标题"
      confirm-button-text="确认"
      cancel-button-text="取消"
    ></van-picker> // 选择器
  </van-popup>
</span>
</template>

<script>
export default {
  components: {},
  data() {
    return {
      pickerVisible: false,
      pickerValue: null,
      columns: ['选项1', '选项2', '选项3'],  // 选择器数据配置
    };
  },

  methods: {
    onShow() {
      this.pickerVisible = true;
    },
    onCancel() {
      this.pickerVisible = false;
    },
    onConfirm(value) {
      this.pickerValue = value;
      this.pickerVisible = false;
    },
  },
};
</script>